<template>
	<view class="withdrawDetails">
        <SRV-topbar title="业绩提现" :isLeft="true"></SRV-topbar>
		<view class="line" v-for="(item,index) in pageResult.list" :key="index">
			<view class="top">
				<text>{{item.achievement}}元</text>
				<text>编号：{{item.withdraw_no}}</text>
			</view>
            <view class="bottom">
                <view>实际到账金额：<text style="color: #FFB437;">￥{{item.achievement_val}}</text></view>
                <view>手续费：<text style="color: #FFB437;">￥{{item.achievement_charge}}</text></view>
            </view>
            <view class="bottom">
                <text>提现到：{{item.arrival_type_name}}【 {{item.arrival_val}} 】</text>
            </view>
			<view class="bottom">
				<text>{{item.time}}</text>
				<view class="state">
					<text>{{item.status_name}}</text>
					<text class="btn" @click="cancelFun(index)" v-if="item.status == 1">取消</text>
				</view>
			</view>
		</view>
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
			<text>暂无记录～</text>
		</view>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list:[{},{},{}],
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList(){
				_self.pageParam.page++
				serve.request({
                    url: '/member/increase/withdraw-list',
                    data: _self.pageParam,
                    v: '/v2'
                }).then(res => {
                    if (res.data && res.data.length > 0) {
                        _self.pageResult.list = _self.pageResult.list.concat(res.data);
                    }
                    _self.pageResult.isEmpty = _self.pageResult.list.length == 0;
                    _self.pageResult.isEnd = res.data.length == 0; 
                });
			},
			cancelFun(index) {
				var id = _self.pageResult.list[index].id;
				uni.showModal({
				    title: '提示',
				    content: '您确定取消当前这条提现申请吗',
				    success: function (res) {
				        if (res.confirm) {
				            serve
				            	.request({
				            		url: '/member/increase/cancel',
				            		data:{
										appkey: uni.getStorageSync('appkey'),
										'access-token': uni.getStorageSync('access-token'),
										id:id,
									},
                                    v: '/v2'
				            	})
				            	.then(res => {
									uni.showToast({
										title:res.message,
										icon:'none'
									});
				            		if(res.code == 200) {
				            			_self.$set(_self.pageResult.list[index], 'status_name', '已取消');
										_self.$set(_self.pageResult.list[index], 'status', -1);
				            		} 
				            	});
				        } 
				    }
				});
			}
		},
		onLoad() {
            _self = this;
			_self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.withdrawDetails{
		.line{
			display: flex;
			flex-direction: column;
			padding: 40rpx 30rpx 30rpx;
			border-bottom: 1rpx #F0EDE9 solid;
			justify-content: space-between;
			.top{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				color: #FFB437;
				font-size: 38rpx;
				font-weight: bold;
				text:last-child{
					color: #000000;
					font-size: 32rpx;
					font-weight: 400;
				}
			}
			.bottom{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				color: #999999;
				.state{
					display: flex;
					align-items: center;
					color: #444444;
					font-size: 28rpx;
					.btn{
						width:140rpx;
						height:48rpx;
						background:rgba(204,204,204,0.3);
						border-radius:24rpx;
						line-height: 48rpx;
						text-align: center;
						margin-left: 28rpx;
						color: #999999;
						font-size: 32rpx;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:32rpx;
				color:rgba(204,204,204,1);
			    margin-top: 30rpx;
			}
		}
	}
</style>
